¥i3 Texas INSTRUMENTS 


User Interface Guidelines 
for the TI-83 Plus 


Release 1.0 


Important information 


Texas Instruments makes no warranty, either expressed or implied, including but not limited to 
any implied warranties of merchantability and fitness for a particular purpose, regarding any 
programs or book materials and makes such materials available solely on an “as-is” basis. 


In no event shall Texas Instruments be liable to anyone for special, collateral, incidental, or 
consequential damages in connection with or arising out of the purchase or use of these 
materials, and the sole and exclusive liability of Texas Instruments, regardless of the form of 
action, shall not exceed the purchase price of this product. Moreover, Texas Instruments shall 
not be liable for any claim of any kind whatsoever against the use of these materials by any 
other party. 


© 1999 Texas Instruments Incorporated 


TABLE OF CONTENTS 


BATE OCGUICUIONN TETT TTT 1 
General Delo] Ufc || <a ee 1 
Terminology and Conventions. ..........cccccccceeeceeeeeeeeeeeeeeeneeeees 2 
User Interface Element .............ccccccceceeseeeeeneneeeeeeeeeeeeeeeeeeees 3 
Basic User Interface Element: Numbered menu............+++ 4 
Basic User Interface Element: Plain M@Nu........++++:1:1+sc00 5 
Basic User Interface Element: Selection list...........::::0000 6 
Basic User Interface Element: Editors .............::::00ee 7 
Basic User Interface Element: Cursor. .......::::::::::ssssesseeeeee 8 
Application User Interface Elements: Soft key...............+++ 9 
Application User Interface Elements: Dialog box............ 10 
Application User Interface Elements: Message box........ 11 


Application User Interface Elements: Data entry form....12 


Application User Interface Elements: List view............+ 13 
BiDIIOgraphy i secstsacs sented dcadecencacansSenanenasinnndnntyccesandvsnasanataans 14 
Appendix A: Standard Fontt...........::::::cssceeeeeeeeeeeeeeeeeeeeeeeees 15 


Appendix B: Small FOnt...........cccccceseeeeeeeeteeeeeeeseeeeeeeeeeeeeeees 21 


User Interface Guidelines for the 7/-83 Plus calculator 1 


INTRODUCTION 


The User Interface (UI) guidelines contained in this document are for the TI-83 Plus calculator. 
Using these guidelines will make the development process of new calculator applications easier 
by creating a frame of reference from which to start. And more importantly, these guidelines will 
make it easier to optimize the interaction between the user and the calculator. 


These guidelines are not hard and fast rules. They are only recommendations. Each application 
has its own unique needs, and in many cases, modifications to the guidelines may be needed 
to create a useful application. 


GENERAL THOUGHTS 


When designing the user interface for new calculator applications, keep in mind that the user 
will already be familiar with the basic UI elements used in the calculator’s built-in functions. 
Starting a design with these familiar elements makes it easier and quicker for end-users to start 
using the calculator application. This will also reduce the complexity of the instruction manuals 
and reduce or eliminate after-purchase support. 


However, it is important to note that improvements can and should be made to the basic Ul 
elements. The basic UI elements are just that: basic. They do not cover all possible functions 
and operations that would be needed in a new application. Changes and modifications to these 
basic Ul elements or introduction of new Ul elements should be considered when it provides a 
perceived benefit to the end user. 


Analogies to existing everyday-life activities are good starting points for creating an application’s 
user interface. Fortunately, most TI-83 Plus calculator users are computer literate; windows, 
function keys, message and dialog boxes are familiar concepts. Thus, the computer is a good 
analogy when creating a new user interface. While the calculator does not have a pointing 
device (mouse), it does have a highly effective cursor control system (arrow keys). The screen 
resolution (64 by 96 pixels) is a fraction of it’s computer counterpart. Therefore, one needs to 
be careful when using graphical elements such as icons. 
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An iterative design process with a feedback loop is one of the most efficient ways to optimize a 
calculator application’s user interface. The steps are straightforward: 


Evaluate the function or operation that needs to be performed. 


It is often useful to make a list of every function that the application needs to provide, 
and then write out the functions in an active expression. E.g., the user selects the 
type of curve from a list of four choices: up, down, left, right. Grouping functions into 
like or similar activities can highlight common activities and often give structure to 
disparate tasks. 


Simulate the user interface. 


This can be as simple as creating storyboards on paper or actually coding the 
desired function to run on the calculator. Obviously a rea/ simulation on a calculator 
eliminates some of the testing variability, but this is usually a costly and time 
consuming effort. 


Test with end-users. 


There are no substitutes for this step in the process. There are many ways to 
perform these tests. Some can be as simple as a one-on-one interview, or as 
complex as a hundred-user beta program. 


Analyze the results and make necessary changes. 

This step in the process can be the most challenging. Tradeoffs and prioritization of 
the functions need to be made, and often without enough data from step 3. 

Go back to step 2. 


There are no rules for how many times a user interface design must go through this 
feedback loop. Time and resource constraints usually dictates when and if more 
changes are needed. 


TERMINOLOGY AND CONVENTIONS 


In order to effectively communicate the user interface design guidelines, the following 
conventions and terminology are used. 


Application — a “signed” executable software program of low-level instruction code that runs in 
the flash memory space on the TI-83 Plus calculator. 


ASM -— a low-level executable software program that runs in the static RAM memory space on 
the TI-83 Plus calculator. This is sometimes referred to as an “assembly program.” 


Program — a set of commands that the TI-83 Plus calculator executes sequentially, as if you 
had entered them right from the keyboard. This has also been referred to as “Calculator 


BASIC.” 
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User Data Archive — calculator data or an ASM that is stored in the flash memory space on the 
TI-83 Plus calculator. This is somewhat analogous to a hard disk on a PC. 


Hard key — a predefined key on the calculator. In this document, they are shown as they 
appear on the calculator e.g. and [ENTER]. The second functions are shown in brackets, in 
upper case letters e.g. [QUIT]. The cursor keys will be shows as follows: up [4] , down [7], 
left (J , right DJ. 


Soft key — one of the keys on the top row when used in conjunction with a graphic on the 
bottom of the screen. Soft keys will use the same notation as the hard keys, except that they 
will use lower case letters, e.g., [esc] and [quit]. Positions of the soft keys will be denoted by the 
abbreviations: F1, F2, F3, F4, F5. 


Home screen — the primary screen of the calculator used to enter instructions for execution, 
and expressions to evaluate. 


Pixel location — the pixel numbering system is similar to that used on the Pxl-On (row, column) 
function where the row numbers are from 0 through 63 and the column numbers are from 0 
through 95. The upper left pixel is (0,0) and the lower right pixel is (63, 95). 


Standard font — this is the 5 x 7 pixel font used by the built-in calculator functions. The 
complete list of characters is shown in Appendix A 


Small font — this is the 3 x 5 pixel font. The complete list of characters is shown in Appendix B. 


Continuous scrolling — when the user presses a cursor key, the resulting action will advance 
to the next item, choice, element, etc. When the last item is reached, it will advance to the first 
item. There is no end; it acts like a continuous loop. 


End scrolling — when the user presses a cursor key, the resulting action will advance to the 
next item, choice, element, etc. When the last item is reached, it will stop at that item. 


Auto repeat — pressing and holding down a key will automatically repeat the keypress at a 
constant rate. 


Work space — the area above the soft key legends 


USER INTERFACE ELEMENTS 


The basic user interface elements used in the base-code of the calculator are defined for 
reference on the following pages. There are many nuances that may not be described with 
each of these elements. Please refer to and exercise an actual TI-83 Plus calculator for specific 
operational details. 


In many instances, the functions within an application need be distinguished from standard 
built-in functions through the use of the unique Application User Interface Elements. These 
elements are also listed on the subsequent pages. 
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Basic USER INTERFACE ELEMENT: NUMBERED MENU 


Usage: This element provides the user a method to select a single item from a list of items. 
There may be several topics on this screen, with each topic having its own list of items. This 
user interface element makes it easy to select an item from a long list; a single hard key press 
can make the selection and then proceed to the next operation. 


Each item in the list is associated with a unique number or letter. The numbers/letters go from 
1,2,3... 8, 9, O, A, B, C, D, E, F...Z. 


The list of items may span more than one screen; i.e., there can be more than seven items in 
this list. 





Example: The MATH function, accessed by pressing = HUM CP! FRE 
employs this user interface element. In this case there are FFP ac 
four topics: MATH, NUM, CPX and PRB. £i rec 

di 

TEA 

Bt thin’ 

T+f Max ¢ 








Control: This element starts with the left most topic highlighted and the first item in the list. 
Only the number or letter with a colon are highlighted; the item itself is not highlighted. 


Pressing [>] will change to the next topic to the right. This key is auto repeat and continuous 
scrolling. Changing the topic will immediately change the items under that topic. 





Example: The NUM function is accessed by pressing >] while |PATH CPX PRB 
in MATH. abs 
roundi 
J: iParti 
4: fParte 
ae inte 








Pressing [4] will change to the next topic to the left. This key is auto repeat and continuous 
scrolling. 


Pressing [7] will highlight the next item down the list. This key is auto repeat and continuous 
scrolling. 


Pressing [4] will highlight the next item up the list. This key is auto repeat and continuous 
scrolling. 





Pressing [ENTER] will immediately execute the selected item. 

Note: Except those functions that need more parameters and get pasted to the home screen. 
Pressing [QUIT] will exit out of the menu and return the user to the home screen. 
Pressing a number or letter key will immediately execute the selected item in the list. 

If more than 7 items are in a list, an up or down arrow will be shown in place of the colon to 


indicate that more items exist above or below the current screen. 
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Basic USER INTERFACE ELEMENT: PLAIN MENU 


Usage: This element provides the user a method to select a single item from two or more 
items. Usually there are only two choices. There may also be several sets of choices per menu. 
This element is very useful for settings or preferences. 


The items do not necessarily have to be text; they can be icons. Also, the choices do not have 
to be on a single line. 


The set of choices may or may not have a description. 





Example: The FORMAT function, accessed by pressing PolarGce 
[FORMAT] employs this user interface element. In this 
example, there are 6 sets of choices, with 2 choices per set. 











The TABLE SET function, accessed by pressing TABLE SETUP 
[TBLSET] is another example of this user interface Th1lStart=-2 
element. This example is unique in that it include sets of 5 =] 

choices with descriptions and a text entry field. eea 











Control: In this element, selected choices are highlighted with the choice of the selected set 
blinking. The choices are left justified separated by a space (6 pixels). The description of the set 
of choices is separated from the choices by a colon and a space. 


Pressing [>] will move cause the next choice to the right to blink. This exhibits end scrolling 
behavior. 


Pressing will highlight the choice that is blinking. The selection will immediately be stored, 
but the menu will remain in place. This behavior is different from the Numbered Menu in that the 
user is not returned to the home screen. 


Pressing [=] will move to the next set of choices. This also exhibits end scrolling behavior. 
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BASIC USER INTERFACE ELEMENT: SELECTION LIST 


Usage: This element provides the user a method to select one or more items from a list of 
items. This is usually used when a large quantity of items (greater than 16) are available for 
selection. 


Example: The CATALOG function, accessed by pressing CATALOG 


[CATALOG] is an example of this element used to select a tabs č 
single item. In the CATALOG function, pressing [letter] and 


will move to the first element with that letter. angler 
ANOVAS 
ARS 
ayIment i 
Asesūff 


The LINK function is an example of this element used to TFAHSHIT 
select multiple items. Note that there are two topic in this 
menu . 








Control: This element exhibits continuous scrolling behavior. Pressing the [+] or [+] key will 
move to the next or previous item in the list. Pressing the [z] or [-]key has no 
effect. The selected element is indicated by a arrow icon in the first column. 


Pressing has different effects for single selection or multiple selection elements. If this is 
a single selection, then pressing will take the selected element and return to the home 
screen. If this is a multiple selection, then pressing will toggle a square icon in the first 
column. 
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BASIC USER INTERFACE ELEMENT: EDITORS 


Usage: This element provides the user with a method to enter text (numbers) within a menu. 


Example: The WINDOW function shows this element in use. 
The description of the field is shown left justified. If the data in 
the field is text, then the description is separated by a colon, 
and for numeric data, the separator is an equals sign. 





Control: Upon entering an editor, the cursor is located on the first character of the first field in 
overwrite mode. If the text is longer than the line, then an ellipsis character (...) will be shown at 
the end of the line. 


Pressing the [4] or [+] keys moves to the next or previous field. Navigation between fields is auto 
repeating and end scrolling. 


Pressing the (<] or [>] keys move to the next or previous character in the text. This is auto 
repeating. 


Pressing will erase the entire text in the field. 
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Basic USER INTERFACE ELEMENT: CURSOR 


Usage: The cursor gives the user a visual indication of where they are during editing. It also 
gives a perspective on how a keypress will react. 


There are 5 different cursors: Entry, Insert, Second, Alpha and Full. The graphics are shown in 
the T/-83 Plus Guidebook on page 1-5. 


Example: N/A 

Control: The following description for cursor control is for a full screen editor, such as [Y=]. 
The cursors are auto repeat in all directions. 

The cursors are end scrolling up and down. 


Scrolling to the right goes sequentially through each character; end of one line to the beginning 
of the next line. 


Scrolling up and down goes to the character in the next or previous line. 
[E] and [~] do not have any effect. 


With the cursor at the bottom of the screen, pressing [7] scrolls the screen by one line. The 
mirror condition occurs when moving up. 


With the cursor at the last character of the last line of the screen, pressing [>] scrolls the screen 
by one line. The mirror condition occurs when moving up. 


Pressing will erase the entire text from the current field. 
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APPLICATION USER INTERFACE ELEMENTS: SOFT KEY 


Usage: Soft keys are used to expand and optimize the input capability of the calculator. They 
are always used with dialog & message boxes and relate directly to the work space. Their 
meanings vary with the context of each screen. 


The legends of the softkeys relate to top row of hard keys: F1, F2 ...F5. The legends use the 
small font. 


It is important to be consistent between screens. The locations of keys with the same meaning 
should remain constant when navigating between screens, e.g., a soft key for saving an entry 
should be in the same location throughout an application. 


Examples: These are generalized illustrations of the soft keys. 
The first screen shows a grid approach and the second shows a 
pictorial representation of the keys on the display. 





Fi Fe | F3 | F4 | FS 


CFA Fe WEE MEY CFE 


Control: The legends for a soft key are usually four characters or less. However, it is 
acceptable to have a legend with up to eight characters and be associated with two hard keys. 
The legends should be centered between the key grid or inside the pictorial representation for 
optimal readability. 


Pressing a soft key should immediately execute the action associated with it. 


The soft key grid is defined with a horizontal bar from (2,57) through (94,57) and vertical lines at 
columns 19, 38, 57 and 76. 


F1 is associated with [Y= 

F2 is associated with [WINDOW] 
F3 is associated with [ZOOM] 
F4 is associated with [TRACE 
F5 is associated with [GRAPH] 
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APPLICATION USER INTERFACE ELEMENTS: DIALOG 
BOX 


Usage: This element provides a way for the user to exchange information with the calculator. It 
is always used with softkeys, and usually only with the [ok] and [esc] keys. 


Users can make a selection from short list of items, enter text (numbers), or make a Boolean 
decision (yes/no). 





Example: This is a generalized illustration of a dialog box 


used to select sets of choices. FROHFT LIME... 
LHEEL i: 


MA CHOICE E 
LABEL 2: Qj no HAYEE 





Ok Esc 





Control: The dialog box element is always centered in the work space. The dialog box should 
be “windowed” over the previous screen to provide context with a one blank pixel around the 
outside of the border. 


The size of the dialog box is defined by the text or graphics contained within it. Horizontally, 
there should be three blank pixels between the dialog text and the border. Vertically, there 
should be two blank pixels between the dialog text and the border. 


The prompt line is separated from the information in the dialog box by a dotted line. The text of 
the prompt is left justified and uses the small font. The prompt is usually followed by an ellipsis 
character (...). 


The labels of a set of choices are left justified followed by a colon. If the label and its choices 
need to be on separate lines, then the choices need to be right justified. This could occur with 
long labels or with long choices. 


The selection of choices is similar to the plain menu user interface element; pressing will 
set the blinking choice. 


[ok] is associated with F1 and will apply the information selected or entered in the dialog box. 
[esc] is associated with F5 and will cancel any selections made and return the user back to the 
previous screen. 
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APPLICATION USER INTERFACE ELEMENTS: MESSAGE 
BOX 


Usage: The message box is used to give information to the user. This is a one-way transaction, 
so the softkeys are not used. Also, the background (previous screen) may be omitted to give 


additional emphasis on the message. 
HESSAGE GOES HERE 
Fress anv kev... 


Control: The text of the message uses the small font and should be centered in the box when 
multiple lines are used. 





Example: This shows a simple message box. 








The text: “Press any key...” is a graphic. A one line space should be placed between this 
graphic and the text of the message. This graphic should always be centered in the box. 


Pressing any hard key on the calculator will acknowledge this message. 
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APPLICATION USER INTERFACE ELEMENTS: DATA 
ENTRY FORM 


Usage: This element provides the user a method to enter data (text/number). It uses the full 
calculator screen and same editor as is found on the built-in calculator functions. The form itself 
uses the work space. 


A prompt line is located at the top of the work space and gives the user additional information 
about the data s/he is entering. The prompt can be either a command or just the label of the 
field name. It uses the small font and is usually followed by an ellipses (...). 


The editor is the full screen width and should result in no formatting changes when viewing the 
data outside the form. 


Example: In this example, the field is a name. ENTER MAHE... 


BILL CLINTOHW 





Control: Cursor control is identical to that of the editor built into the calculator. 


When entering a field that expects alpha text, the [chrs] softkey can be used to extend the 
calculator’s character set. 


The [save] key is associated with F1 and will save the data. [esc] will cancel any changes and 
return to the previous state. 
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APPLICATION USER INTERFACE ELEMENTS: LIST VIEW 


Usage: This element is used to display a long list of items. Each row represents a single item. 
This is somewhat similar to the selection list element built into the calculator, except that this is 
used with lists of user-defined data, and not predefined. The text of each item in the list uses 
the small font, and the first character starts on pixel column number 1. This allows for full 
reverse highlighting. 


Example: This example shows the first item selected with the ITEH MUHEER i 


third item having more information than will fit on the screen. ITEH MUHEER = 
ITEH MUHEER > HITH HORE 


ITEH MUHEER 4 


ITEH NMUHEER 5 
ITEH MUHEER 6 
ITEH MUHEER 7 


T T TT 





Control: This element exhibits end scrolling behavior. Often it is useful to provide the user with 
the ability to jump to a place in the list by pressing a number or alpha key. 


Pressing when an item is highlighted will move control to that item. 


The [z] and [4] keys cause the next or previous 7 items to be shown in the work 
space. 


If more text exists for an entry, a right arrow icon will be shown at the end of the line. Pressing 
[P] will scroll the selected entry to the left one character at a time until the last character is 
displayed in the last column. 
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